<template>
  <div class="all">
    <!-- 按钮栏组件（添加、删除） skipSign:true //跳过检验-->
    <!-- {{sysCompanyCodeRoles}} -->
    <!-- {{getFindByTypeData}} -->
    <el-button type="primary" plain @click="createdAdd" size="mini" icon="el-icon-plus">新建</el-button>
    <!-- <el-button
      class="allDelete"
      type="danger"
      plain
      @click="toDelete"
      size="mini"
      icon="el-icon-delete"
    >批量删除</el-button> -->
    <!-- <div>{{addData.diaDataAdd[1]}}</div>
    <div>{{addData.diaDataAdd[index]}}</div> -->
    <!-- 弹窗 -->
    <el-dialog title="新增" :visible.sync="addData.dialogVisibleAdd" style="height: 90%;" :before-close="handleClose">
      <div class="bod">
        <div class="list" v-for="(item,index) in addData.diaDataAdd" :key="index" v-if="item.addSign">
          <!-- {{addData.diaDataAdd}} -->
          <template v-if="item.addSign">
            <!-- input框 -->
            <div v-if="item.type==='input'&&item.addSign" class="lister">
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                <span v-else style="color:white;">*</span>
                {{item.CN}}:
              </span>
              <span class="inb">
                <!-- 标记：{{[item.attr]}} -->
                <!-- {{item}} -->
                <!-- <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"
                v-if="item.EN==='notes'"
              > -->
                <el-input v-if="item.EN==='notes' || item.EN==='memo'" width='210px' type="textarea" v-model="addData.diaDataAdd[index].value" placeholder="请输入内容" clearable @blur="BurExp($event,item,index)" size="mini"></el-input>
                <el-input v-model="addData.diaDataAdd[index].value" :placeholder="item.indexConValue || '请输入内容'" clearable @blur="BurExp($event,item,index)" size="mini" v-else></el-input>
              </span>
              <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
                <el-button icon="el-icon-warning" circle></el-button>
              </el-tooltip>
              <!-- <span v-if="!item.result" class="font_color"></span> -->
            </div>
            <!-- 计数器 -->
            <div class="lister" :key="index" v-else-if="item.type==='number'&&item.addSign">
              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}:
              </span>
              <span class="inb">
                <!-- 标记：{{[item.attr]}} -->
                <el-input-number v-model="addData.diaDataAdd[index].value" :min="1" label="描述文字" size="mini"></el-input-number>
              </span>
              <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
                <el-button icon="el-icon-warning" circle></el-button>
              </el-tooltip>
            </div>
            <!-- 时间选择 -->
            <div class="lister" :key="index" v-else-if="item.type=='date'&&item.addSign">
              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}:
              </span>
              <span class="inb" v-if="item.type=='date'&&item.addSign">
                <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime"></el-date-picker>
              </span>
            </div>
            <!-- 年月日 -->
            <div class="lister" :key="index" v-else-if="item.type=='datetime'&&item.addSign">
              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}:
              </span>
              <span class="inb" v-if="item.type=='datetime'&&item.addSign">
                <el-date-picker size="mini" v-model="addData.diaDataAdd[index].value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" @change="getSTime"></el-date-picker>
              </span>
            </div>
            <!-- 下拉框 -->
            <div class="lister" :key="index" v-else-if="item.type=='select'&&item.addSign">

              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <!-- 字典 -->
              <!-- <dictionaries :searchData='diaDataAdd' :modelType='modelType' @optionData="dictionariesCallBack" @optionDataTable="dictionariesTableCallBack"></dictionaries> -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}:
              </span>
              <span v-if="item.EN ==='superior'" class="inb">
                <el-cascader v-model="addData.diaDataAdd[index].value" :options="selectOptions" :props="{ checkStrictly: true }" clearable></el-cascader>
              </span>
              <span v-else class="inb">
                <!-- 字典项 typeGroupCode-->
                <el-select v-if="item.typeGroupCode" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                  <el-option v-for="i in searchOption[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                  <!-- <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option> -->
                </el-select>
                <!-- 租户管理员页面  --租户框 -->

                <el-select v-else-if="item.EN == 'sysCompanyCode'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysCompanyCodeChange(addData.diaDataAdd[index].value)" clearable>
                  <el-option v-for="i in getFindByTypeData" :key="i.value" :label="i.name" :value="i.sysCompanyCode"></el-option>
                </el-select>
                <!-- 租户管理员页面  --角色框 -->
                <el-select v-else-if="item.EN == 'groupId'" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" @change="sysRoleChange" clearable>
                  <!-- 一个租户只对应一个角色 -->
                  <!-- <el-option :label="roleObj.name" :value="roleObj.id"></el-option> -->
                  <!-- {{roleArr}} -->
                  <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
                <!-- 字典项 dictTable-->
                <el-select v-else-if="item.dictTable" v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable>
                  <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                </el-select>

              </span>
            </div>
            <!-- 设备下拉框 -->
            <div class="lister" :key="index" v-else-if="item.type=='device'&&item.addSign">
              <!-- v-for="(item,index) in addData.diaDataAdd" -->
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}:
              </span>
              <span class="inb" v-if="item.type=='device'&&item.addSign">
                <el-select v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="mini" clearable @change="deviceChange">
                  <el-option v-for="i in searchOptions[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
                </el-select>
              </span>
            </div>
            <!-- 多选框 -->
            <div class="Checkbox" :key="index" v-else-if="item.type=='Checkbox'&&item.addSign">
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}
              </span>
              <span class="inb" v-if="item.type=='Checkbox'&&item.addSign">
                <el-checkbox v-model="addData.diaDataAdd[index].value"></el-checkbox>
              </span>
            </div>
            <!-- 下拉多选 -->
            <div class="lister" :key="index" v-else-if="item.type=='selectMuli'&&item.addSign">
              <span class="fon">
                <span v-if="!item['skipSign']" style="color:red;">*</span>
                {{item.CN}}
              </span>
              <span class="inb" v-if="item.type=='selectMuli'&&item.addSign">
                <el-select v-model="addData.diaDataAdd[index].value" placeholder="请选择" size="small" clearable multiple @change="paramChange" @remove-tag="removeParam">
                  <el-option v-for="i in paramData" :key="i.id" :label="i.name" :value="i.id"></el-option>
                </el-select>
              </span>
            </div>
          </template>
        </div>
        <span slot="footer" class="but">
          <el-button type="primary" @click="toAdd" size="mini">确 定</el-button>
          <el-button @click="addData.dialogVisibleAdd = false" size="mini">取 消</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSelectByCodeAndType, //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from '@/api/TenantAdministratorManagement'
import {
  assflParam, //增加
} from "@/api/schedule/base/flParam/index";
// 字典
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  data () {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项 ${i}`,
          disabled: i % 4 === 0
        });
      }
      return data;
    };
    return {
      titles: ['待选参数', "已选参数"],
      //下拉多选框
      paramData: [],
      operaParamData: [],
      disabledBathch: false,
      // 租户管理员  租户-角色数据
      sysCompanyCodeRolesData: this.$parent.sysCompanyCodeRoles,
      //添加数据模型
      addData: {
        //弹窗控制
        dialogVisibleAdd: false,
        //数据字典
        diaDataAddDictionaries: [],
        //添加弹窗的数据模型
        diaDataAdd: [],
        //确定的disabled，
        mainDisabled: true,
        eventualData: undefined,
      },
      //表格数据
      tableData: [],
      // selectData:[]
      selectOptions: [
        {
          id: 1,
          name: '微山自来水',
          children: [
            {
              id: 2,
              name: '幸福苑小区',
              children: [{ id: 3, name: '1号楼' }],
            },
          ],
        },
        {
          id: 4,
          name: '泗水县',
          children: [
            {
              id: 5,
              name: '花园小区',
              children: [
                { id: 6, name: '1号楼' },
                { id: 7, name: '2号咯' },
                { id: 8, name: '2号咯' },
                { id: 9, name: '2号咯' },
              ],
            },
            {
              id: 10,
              name: '荣盛小区',
            },
          ],
        },
      ],
      superiorData: '',
      // 组件类型
      modelType: 'search',
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      checked: false,
      // 备注  文本域
      textarea: '',
      // 返回的角色对象
      roleArr: [],
    }
  },
  computed: {
  },
  props: [
    //添加传过来的值
    'diaDataAdd',
    'optionsZi',
    'searchOptionTable',
    'getFindByTypeData',
    'sysCompanyCodeRoles',
    'multipleSelection',
  ],
  mounted () {
    this.addData.diaDataAdd = JSON.parse(JSON.stringify(this.diaDataAdd))
  },
  methods: {
    //选择设备
    deviceChange (v) {
      this.handleParam(v)
    },
    //用设备id查找参数
    handleParam (id) {
      let obj = { deviceId: id }
      assflParam(obj).then(response => {
        console.log(response, "6666666666")
        this.paramData = JSON.parse(JSON.stringify(response.data))
        this.operaParamData = JSON.parse(JSON.stringify(response.data))
      }).catch(

      );
    },
    paramChange (v) {
      for (let i = 0; i < v.length; i++) {
        for (let j = 0; j < this.paramData.length; j++) {
          if (this.paramData[j].id == v[i]) {
            this.paramData.splice(j, 1);
            j = j - 1;
          }
        }
      }
    },
    removeParam (v) {
      let backParamData = this.operaParamData.find((item) => {
        return item.id === v
      })
      this.paramData.unshift(backParamData)
    },
    sysRoleChange (newvalue) {

      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr

      var id = ''
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index]
        id = roleArrs[index].id
      }
      this.$emit('sysRoleId', id)
      console.log(id)
    },
    // getFindByTypeData(){
    //   this.getFindByType()
    // },
    //
    // 租户管理员页面  如果改变触发
    async sysCompanyCodeChange (value) {
      console.log(value, 'duime')
      // console.log(this.$parent.getSelectByCodeAndTypeData(value));
      const res = await getSelectByCodeAndType(value)
      console.log(
        res,
        '子组件用于添加租户管理员时选择租户后之间传回选择租户的角色'
      )
      const roleObjs = res.data
      if (roleObjs) {
        console.log(roleObjs)

        this.roleArr = roleObjs
        // console.log([roleObjs],999999999);
        // console.log(this.roleArr,8888888888888);
      } else {
        console.log('该租户没有对应的角色')
      }

      // console.log(22222222222222222);

      // this.$parent.getSelectByCodeAndTypeData(value)
      // console.log(sysCompanyCodeRoles);

      // console.log(this.sysCompanyCodeRolesData,'99999',res,'sssssss');
    },
    //   获取父级select的数据
    // getSelectData(){
    //     console.log(this.$parent,'ceshikk');

    // },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          this.addData.dialogVisibleAdd = false
          done()
        })
        .catch((_) => { })
    },
    //搜索框内容传递给父元素
    createdAdd () {
      this.addData.dialogVisibleAdd = true
      //清空value;
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        this.addData.diaDataAdd[i].value = ''
        this.addData.diaDataAdd[i].result = true
      }
    },
    //添加-传给父组件，ajax
    toAdd () {
      console.log(this.runParam, this.errorParam, this.turnOnParam)
      debugger;
      let bur = true
      let attrArr = []
      for (let i = 0; i < this.addData.diaDataAdd.length; i++) {
        //console.log(this.addData.diaDataAdd[i].EN);    || at.value == ""
        let at = this.addData.diaDataAdd[i]
        //at.result === false || at.value == ""
        //sign

        // -------------
        // if (at.addSign) {
        //   if (at.result === false || at.value == "") {
        //     // 判断红色星号    是否必须为空
        //     console.log(at.value);

        //     if (at["skipSign"]) {
        //       bur = true;
        //     }
        //     else{
        //       bur = false;
        //       break;
        //     }
        //   }
        // } else {
        // }
        // ------------------s

        if (at.addSign && !at['skipSign']) {
          if (at.result === false || at.value === '') {
            // 判断红色星号    是否必须为空
            console.log(at.value, 22)
            // numberqq +=1
            bur = false
            break

            // if (!at["skipSign"]) {
            //   bur = false;
            //   // bur = true;
            //   console.log(at.result,at.value,8222,at);
            //   break;
            // }
            // else{
            //   // bur = false;
            // }
          }
        } else {
          if (at.result === false) {
            bur = false
            break
          }
        }
      }
      console.log(bur, 8881111)
      console.log(bur)

      if (bur === true) {
        this.$emit('toAdd', this.addData.diaDataAdd)
        this.addData.dialogVisibleAdd = false
      } else {
        // console.log(this.superiorData.length !=0,'ceshi');
        this.$message({
          message: '请添加全部参数，并符合标准！',
          type: 'warning',
        })
        // alert("请添加全部参数，并符合标准！");
      }
    },

    //删除-传给父组件，ajax
    toDelete () {
      this.$emit('toDelete', '点击了删除')
    },

    getSTime (val) {
      this.addData.diaDataAdd.createTime = val
      // console.log(val)
    },
    //正则表达式
    BurExp (e, item, index) {
      if (this.addData.diaDataAdd[index].skipSign && e.target.value === '') {
        item.result = true
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value)
        item.result = boolean
        this.addData.diaDataAdd[index].result = boolean
        console.log(item.result, 999)
      }
      // console.log(item, index);
      // console.log( this.addData.diaDataAdd,this.TableDataModel)

      // ----
      // let boolean = new RegExp(item.Exp).test(e.target.value);
      // this.addData.diaDataAdd[index].result = boolean;
      // ----
      // this.TableDataModel[index].result= boolean;
      // let newAobj=this.TableDataModel[index]
      // console.log(boolean);
      // console.log(this.TableDataModel[index]);
    },
    // 新增   租户特殊请求
    getSelectByCodeAndTypeDatas () {
      console.log(this.$parent.getSelectByCodeAndTypeData, 'zhegeshishsi')
    },
  },
  created () {
    // this.getSelectData()
    this.getSelectByCodeAndTypeDatas()
  },
  watch: {
    optionsZi (newVal) {
      this.searchOption = newVal
    },
    searchOptionTable (newVal) {
      this.searchOptions = newVal
    },
    multipleSelection (newVal) {
      console.log(newVal, 3589)
      if ((newVal, length == 0)) {
        this.disabledBathch = false
      } else {
        this.disabledBathch = true
      }
      console.log(newVal, this.disabledBathch, 3589)
    },
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.bod {
  // height: 500px;
  position: relative;
}
.but {
  position: absolute;
  right: 8px;
  bottom: -15px;
}
.all {
  .is-plain {
    // width: 84px;
    // height: 34px;
    // /deep/.el-icon-plus{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  .allDelete {
    // width: 110px;
    // /deep/.el-icon-delete{
    //   width: 18px;
    //   height: 18px;
    //   text-align: center;
    //   line-height: 18px;
    // }
  }
  display: inline-block;
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    .lister {
      height: 44px;
      width: 370px;
      .fon {
        text-align: right;
        margin-right: 14px;
        width: 99px;
      }
      .inb {
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
    .font_color {
      font-size: 12px;
      padding-left: 100px;
      padding-top: 10px;
    }
  }
}
</style>
